<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <canvas id="canvas" style="background-color: black;"></canvas>
</body>
<script src="/script/utils.js"></script>
<script src="/components/Arrow.js"></script> 
<script>
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d')
  
  const W = canvas.width = 800
  const H = canvas.height = 600

  let mouse = C.getOffset(canvas)

  canvas.onclick = function () {
    console.log(mouse.x, mouse.y)
  }

  const arrow = new Arrow({
    x: W / 2,
    y: H / 2,
    w: 180,
    h: 60
  }).render(ctx)

  canvas.onmousemove = function () {
    let dx = mouse.x - arrow.x
    let dy = mouse.y - arrow.y
    arrow.rotation = Math.atan2(dy, dx)

    ctx.clearRect(0, 0, W, H)
    arrow.render(ctx)
  }
</script>
</html>